<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;height: 56px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-select placeholder="请选择年份" v-model="filters.selYear">
						<el-option v-for="item in selYears" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="fnGetCalendar">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" @click="fnOpenCalendar">新增假日</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--日历列表-->
		<el-table :data="calendar" border v-loading="calendarLoading" class="calendar-list">
			<el-table-column type="index" label="#" width="60">
			</el-table-column>
			<el-table-column prop="Category" label="类型">
			</el-table-column>
			<el-table-column prop="Festival" label="名称">
			</el-table-column>
			<el-table-column prop="StartDate" label="开始时间" :formatter="fnDateFormat">
			</el-table-column>
			<el-table-column prop="EndDate" label="结束时间" :formatter="fnDateFormat">
			</el-table-column>
			<el-table-column label="操作" width="65">
				<template scope="scope">
				    <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
				      	<el-button type="danger" size="mini" icon="custom-delete"  @click="fnDelete(scope.row.ID)"></el-button>
				    </el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		
		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :inline="true" :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="名称" prop="Desc">
					<el-input v-model="addForm.Desc" placeholder="名称" style="width:113%;"></el-input>
				</el-form-item>
				<el-form-item style="width:48%;"></el-form-item>
				<el-form-item label="类型" prop="Category">
					<el-select placeholder="请选择" v-model="addForm.Category">
						<el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="年份" prop="Year">
					<el-select placeholder="请选择" v-model="addForm.Year" @change="fnChangeYear">
						<el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="开始日期" prop="Start">
				    <el-date-picker v-model="addForm.Start" type="date" placeholder="开始日期" style="width: 217px;" :picker-options="pickerOptions" @change="fnGetStart"></el-date-picker>
				</el-form-item>
				<el-form-item label="结束日期" prop="End">
				    <el-date-picker v-model="addForm.End" type="date" placeholder="结束日期" style="width: 217px;" :picker-options="pickerOptions" @change="fnGetEnd"></el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="fnAddCalendar">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
    import Svc from '../../service/index.js'
    import moment from 'moment'
	export default {
		data() {
			let that = this;
			return {
				filters : {
					selYear : moment(new Date()).format('YYYY')
				},
				//假日类型
				types : [{
					label : '节假日',
					value : 0
				},{
					label : '工作日调休',
					value : 1
				}],
				//过滤使用的年份
				selYears : this.fnGetSelYears(),
				//年份
				years : this.fnGetYears(),
				//日历列表
				calendar : [],
				calendarLoading : false,
				//新增内容
				addForm : {
					Category : 0,
					Year : moment(new Date()).format('YYYY'),
					Desc : '',
					Start :'',
					End : ''
				},
				addFormVisible : false,
				//新增验证
				addFormRules : {
    	        	Desc: [
		            	{ required: true, message: '请输入假日名城', trigger: 'blur' }
		          	]
//		          	Start: [
//		          		{ type:"date", message: '请选择假日开始日期', trigger: 'blur' }
//		          	],
//		          	End: [
//		          		{ type:"date", message: '请选择假日结束日期', trigger: 'blur' }
//		          	]
		      	},
		      	pickerOptions: {
	          		disabledDate(time) {
	            		return moment(time).format('YYYY') != that.addForm.Year;
	          		}
	       		}
			}
		},
		methods: {
			//显示message提示框
            openMessage(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
		    },
		    //时间格式化  
            fnDateFormat:function(row, column) {
            	var moment = require('moment');
                var date = row[column.property];  
	          	if (date == undefined) {  
	             	return "";  
	          	}  
	          	return moment(date).format("YYYY-MM-DD");  
            },
			//获取当前年份及后五年
			fnGetYears() {
				var nowYear = moment(new Date()).format('YYYY')
				var years = []
				for(let i = 0; i < 5; i++) {
					var item = {
						label : parseInt(nowYear) + i,
						value : parseInt(nowYear) + i
					}
					
					years.push(item)
				}
				return years
			},
			//过滤使用的年份（前后五年）
			fnGetSelYears(){
				var nowYear = moment(new Date()).format('YYYY')
				var years = []
				for(let i = -5; i < 5; i++) {
					var item = {
						label : parseInt(nowYear) + i,
						value : parseInt(nowYear) + i
					}
					
					years.push(item)
				}
				return years
			},
			//选择年份
			fnChangeYear(){
				var that = this
				that.addForm.Start = moment(new Date(that.addForm.Year,0,1)).format('YYYY')
				that.addForm.End = moment(new Date(that.addForm.Year,0,1)).format('YYYY')
			},
			//获取开始日期
			fnGetStart(val){
				this.addForm.Start = val
			},
			//获取结束日期
			fnGetEnd(val){
				this.addForm.End = val
			},
		    //打开新增页面
		    fnOpenCalendar(){
		    	var that = this
		    	that.addFormVisible = true
		    },
		    //新增
		    fnAddCalendar(){
		    	var that = this
		        that.$refs.addForm.validate((valid) => {
		          if (valid) {
		          		//参数设置
		          		that.addForm.Year = parseInt(that.addForm.Year)
		          		console.log(that.addForm.Start)
		          	
			            Svc.fnPostData('/api/calendar/add',that.addForm,function(res){
			            	if (res.body.ErrCode == 0){
			            		that.addFormVisible = false
			            		that.openMessage("新增成功！",'success')
			            		that.fnGetCalendar()
			            	} else {
			            		that.openMessage(res.body.ErrMsg,'error')
			            	}
			            },function(res){
			            	that.openMessage("网络错误，请重新！",'error')
			            })
		          	} else {
			            return false;
			        }
		        });
		    },
		    //获取选择年份的日历
		    fnGetCalendar(){
		    	var that = this
	            Svc.fnGetData('/api/calendar/fetch/' + parseInt(that.filters.selYear),{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.calendar = res.body.Data
	            	} else {
	            		that.openMessage("指定年份日历获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //删除
		    fnDelete(id){
		    	var that = this
		    	that.$confirm('您确认删除本条日历记录吗？', '提示', {
					type: 'warning'
				}).then(function(){
					Svc.fnPostData('/api/calendar/delete',{ID:id},function(res){
		            	if (res.body.ErrCode == 0){
		            		that.openMessage("删除操作成功！",'success')
		            		that.fnGetCalendar()
		            	} else {
		            		that.openMessage("删除操作失败！",'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
				})
		    }
		},
		mounted() {
			//获取当前年份的日历
		    this.fnGetCalendar()
		}
	}

</script>

<style scoped>
	.calendar-list{
		width: 100%;
		margin-top: 20px;
	}

	.toolbar {
	    background: #f2f2f2;
	    padding: 10px;
	    margin: 10px 0;
	}
</style>